<template>
<div>
    <div class="category">
        <header id="header">
            <a href="javascript:history.go(-1)" class="back">
                <div class="iconfont icon-back"></div>
            </a>
            <h1 class="title">分类</h1>
            <nav class="sexbtn">
                <h3>
                    <a href="#" :class="[!ismale?'btn-tab':'btn-tab active']" @click="ismale=true">男生</a>
                </h3>
                <h3>
                    <a href="#" :class="[ismale?'btn-tab':'btn-tab active']" @click="ismale=false">女生</a>
                </h3>
            </nav>
            <div class="operate">
                <router-link to="/search" tag="span"  class="iconfont icon-search"></router-link>
                <span href="#" class="iconfont icon-menu"></span>
            </div>
        </header>
        <div class="content">
            <ul>
                <li class="sort-li" data-l2="1" v-for="(item,index) in (ismale?malelist:femalelist)" :key="index">
                    <router-link class="sort-li-header" :to="{path:'/catlist',query:{name:item.title}}">
                        <!-- <a href="/category/21" class="sort-li-header" data-eid="mqd_B1"> -->
                            <h3 class="module-title">{{item.title}}</h3>
                            <span class="sort-li-data" role="option">共<output>{{item.num}}</output>本作品 </span>
                            <span class="iconfont icon-forward"></span>
                        <!-- </a> -->
                        </router-link>
                        <div class="sort-li-detail">                            
                            <a href="javascript:void(0)" class="btn-line-gray" v-for="(i,k) in item.datalist" :key="k">{{i}}</a>
                            <!-- 这里4个空i两端职能对齐效果实现必须，注意空格需要保留 -->
                            <!-- <i></i> <i></i> <i></i> <i></i> -->
                        </div>
                    </li>
            </ul>
        </div>
    </div>
</div>
</template>
<script>
import {getCat} from '../api/cat.js'
export default {
    data() {
        return {
            ismale:true,
            malelist:[
        {title:"玄幻",datalist:["东方玄幻","异世大陆","王朝争霸","高武世界"],num:"721722"},
        {title:"奇幻",datalist:["现代魔法","剑与魔法","史诗奇幻","黑暗幻想","历史神话","另类幻想"],num:"159241"},
        {title:"武侠",datalist:["传统武侠","武侠幻想","国术无双","古武未来","武侠同人"],num:"45378"},
        {title:"仙侠",datalist:["修真文明","幻想修仙","现代修真","神话修真","古典仙侠"],num:"236460"},
        {title:"都市",datalist:["爱情婚姻","都市生活","都市异能","异术超能","青春校园","娱乐明星","商战职场"],num:"374244"},
        {title:"现实",datalist:["社会乡土","生活时尚","文学艺术","成功励志","青春文学","爱情婚姻","现实百态"],num:"43492"},
        {title:"军事",datalist:["军旅生涯","军事战争","战争幻想","抗战烽火","谍战特工"],num:"20623"},
        {title:"历史",datalist:["架空历史","秦汉三国","上古先秦","历史传记","两晋隋唐","五代十国","两宋元明"],num:"77225"},
        {title:"游戏",datalist:["电子竞技","虚拟网游","游戏异界","游戏系统","游戏主播"],num:"108311"},
        {title:"体育",datalist:["篮球运动","体育赛事","足球运动"],num:"9109"},
        {title:"科幻",datalist:["古武机甲","未来世界","星际文明","超级科技","时空穿梭","进化变异","末世危机"],num:"157333"},
        {title:"悬疑",datalist:["诡秘悬疑","奇妙世界","侦探推理","探险生存","古今传奇"],num:"66996"},
        {title:"轻小说",datalist:["原生幻想","现代幻想","衍生同人","搞笑吐槽","恋爱日常"],num:""},
        {title:"短篇",datalist:["诗歌散文","人物传记","影视剧本","评论文集","生活随笔","美文游记","短篇小说"],num:""},
        ],
        femalelist:[
        {title:"古代言情",datalist:["古代情缘","宫闱宅斗","王朝争霸","高武世界"],num:"721722"},
        {title:"仙侠奇缘",datalist:["现代魔法","剑与魔法","史诗奇幻","黑暗幻想","历史神话","另类幻想"],num:"159241"},
        {title:"现代言情",datalist:["传统武侠","武侠幻想","国术无双","古武未来","武侠同人"],num:"45378"},
        {title:"浪漫青春",datalist:["修真文明","幻想修仙","现代修真","神话修真","古典仙侠"],num:"236460"},
        {title:"玄幻言情",datalist:["爱情婚姻","都市生活","都市异能","异术超能","青春校园","娱乐明星","商战职场"],num:"374244"},
        {title:"悬疑推理",datalist:["社会乡土","生活时尚","文学艺术","成功励志","青春文学","爱情婚姻","现实百态"],num:"43492"},
        {title:"短篇",datalist:["军旅生涯","军事战争","战争幻想","抗战烽火","谍战特工"],num:"20623"},
        {title:"科幻空间",datalist:["架空历史","秦汉三国","上古先秦","历史传记","两晋隋唐","五代十国","两宋元明"],num:"77225"},
        {title:"游戏竞技",datalist:["电子竞技","虚拟网游","游戏异界","游戏系统","游戏主播"],num:"108311"},
        {title:"轻小说",datalist:["篮球运动","体育赛事","足球运动"],num:"9109"},
        {title:"现实生活",datalist:["古武机甲","未来世界","星际文明","超级科技","时空穿梭","进化变异","末世危机"],num:"157333"},
        ]
        }
    },
    created(){
        getCat().then(data=>{
            console.log(data);
        })
    }
}
</script>
<style lang="less">
.category{
#header{
    position: relative;
    box-sizing: border-box;
    height: 2.75rem;
    padding-top: .6875rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #f0f1f2;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .back{
        display: inline-block;
        padding-left: 12px;
        .iconfont{
            font-size: 18px;
        }
    }
    .title{
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.375rem;
    position: absolute;
    left: 2.6875rem;
    overflow: hidden;
    max-width: 60%;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .btn-tab{
    font-size: .8125rem;
    
    display: block;
    line-height: 1.6875rem;
    padding: 0 .75rem !important;
    text-align: center;
    color: #ed424b;
    border: 1px solid #ed424b;
    font-weight: normal !important;
}
    .sexbtn>h3:last-child>.btn-tab{
    border-radius: 0 4px 4px 0;
}
.sexbtn>h3:first-child>.btn-tab{
    border-radius: 4px 0 0 4px;
}
.active{
    color: #fff;
    background-color: #ed424b;
}
.sexbtn{
    display: flex;
    // margin-top: -4px;
    // margin-left: 40px;
    position: absolute;
    top: 21%;
    left: 37%;
    a{
        // font-size: 14px;
        font-weight: normal;
    }
}
.logo-a{
    padding: 0 1rem;
}
.logo{
    font-size: 18px;
    color: black;   
}
.operate{
    height: 2rem;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    line-height: 1.5rem;
    // padding: .25rem .375rem;
    // margin-left: 68px;
    /* margin-top: 4px; */
}
.operate span{
    display: inline-block;
    height: 24px;
    width: 24px;
    /* background-color: red; */
    margin-right: 6px;
    font-size: 16px;
    // color: #ed424b;
}
.operate span:last-child{
    font-size: 24px;
}
}
.content{
    background-color: #fff;
    ul{

    li{
    .sort-li-header{
    line-height: 40px;
    position: relative;
    display: block;
    padding: 0 1rem;
    .module-title {
    font-family: FZZCYSK;
    font-weight: 400;
    display: inline;
    color: #33373d;
    }
    .sort-li-data {
    font-family: 'pingfang sc';
    font-size: .8125rem;
    margin-left: .5rem;
    color: #969ba3;
     output {
    margin: 0 .5ch;
    }
    }
    .iconfont{
            font-size: .875rem;
    position: absolute;
    top: 0;
    right: .875rem;
    bottom: 0;
    margin: auto;
    color: #969ba3;
    }
    ::after{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 1rem;
    content: '';
    border-bottom: 1px solid #f0f1f2;
    }
        }
    .sort-li-detail {
    font-size: .75rem;
    line-height: 0;
    padding: 0 1rem 1rem;
    text-align: justify;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    .btn-line-gray {
    margin-top: .75rem;
    margin-right: .73rem;
    }
    .btn-line-gray, .btn-line-gray ~ i:empty, .btn-tag {
    color: #969ba3;
    }
    .btn-line, .btn-line-gray, .btn-line-gray ~ i:empty, .btn-tag {
    font-size: .8125rem;
    line-height: 1.6875rem;
    display: inline-block;
    padding: 0 .625rem;
    text-align: center;
    border: 1px solid;
    border-radius: 99px;
    }
    }
    }
    }
}
}
</style>